import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import cookbook from '../../assets/images/cookbook.png'
import cookbookactive from '../../assets/images/cookbook-active.png'
import menu from '../../assets/images/menu.png'
import menuactive from '../../assets/images/menu-active.png'
import more from '../../assets/images/more.png'
import moreactive from '../../assets/images/more-active.png'
import Cookbook from '../../views/cookbook/index'
import Classify from '../../views/Classify/index'
import More from '../../views/More/index'

class footer extends Component {
    state = {
        selectedTab: 'cookbook',
        hidden: false,
        fullScreen: false,
      };

     

    render() {
        return (
            <div style={ { position: 'fixed', height: '100%', width: '100%', top: 0 } }>
            <TabBar
              unselectedTintColor="#949494"
              tintColor="#111111"
              barTintColor="white"
              hidden={this.state.hidden}
            >
              <TabBar.Item
                title="菜谱大全"
                key="cookbook"
                icon={<div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${cookbook}) center center /  21px 21px no-repeat` }}
                />
                }
                selectedIcon={<div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${cookbookactive}) center center /  21px 21px no-repeat`}}
                />
                }
                selected={this.state.selectedTab === 'cookbook'}
             
                onPress={() => {
                  this.setState({
                    selectedTab: 'cookbook',
                  });
                }}
                data-seed="logId"
              >
                <Cookbook/>
              </TabBar.Item>
              <TabBar.Item
                icon={
                  <div style={{
                    width: '22px',
                    height: '22px',
                    background: `url(${menu}) center center /  21px 21px no-repeat` }}
                  />
                }
                selectedIcon={
                  <div style={{
                    width: '22px',
                    height: '22px',
                    background: `url(${menuactive}) center center /  21px 21px no-repeat` }}
                  />
                }
                title="分类"
                key="Koubei"
              
                selected={this.state.selectedTab === 'menu'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'menu',
                  });
                }}
                data-seed="logId1"
              >
               <Classify />
              </TabBar.Item>
              <TabBar.Item
                icon={
                  <div style={{
                    width: '22px',
                    height: '22px',
                    background: `url(${more}) center center /  21px 21px no-repeat` }}
                  />
                }
                selectedIcon={
                  <div style={{
                    width: '22px',
                    height: '22px',
                    background: `url(${moreactive}) center center /  21px 21px no-repeat` }}
                  />
                }
                title="更多"
                key="Friend"
               
                selected={this.state.selectedTab === 'more'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'more',
                  });
                }}
              >
             <More/>
              </TabBar.Item>
            
            </TabBar>
          </div>
        );
    }
}

export default footer;
